<template>
  <div class="detailDialog">
    <template v-for="(item,index) in contentsList" >
      <!-- 合格不合格类 -->
      <div v-if="item.optionType === 1" class="detailDialog_qualification" :key="index">
        <div class="detailDialog_qualification_type">
          <p class="detailDialog_qualification_type_typeName">合格不合格类</p>
          <div
            class="detailDialog_qualification_type_typeContent"
          >检查内容&nbsp;&nbsp;{{item.content}}</div>
        </div>
        <div class="detailDialog_qualification_qualified">A. 合格</div>
        <div class="detailDialog_qualification_unqualified">B. 不合格</div>
        <div class="detailDialog_operate" v-if="isShowOperate">
          <p @click="editInspectItem(index)">编辑</p>
          <p @click="deleteInspectItem(index)">删除</p>
        </div>
      </div>

      <!-- 单选类 -->
      <div v-if="item.optionType === 2" class="detailDialog_singleSelect" :key="index">
        <div class="detailDialog_singleSelect_type">
          <p class="detailDialog_singleSelect_type_typeName">单选类</p>
          <div
            class="detailDialog_singleSelect_type_typeContent">
            检查内容&nbsp;&nbsp;{{item.content}}
          </div>
        </div>
        <div
          v-for="(checkContent, checkIndex) in item.attr"
          :key="checkIndex"
          class="detailDialog_singleSelect_list">
          <span>{{printLetters(checkIndex)}}. {{checkContent.option}}</span>
          <span
            class="detailDialog_singleSelect_list_unqualified">
            {{checkContent.isOk === 1 ? '' : '不合格选项'}}
          </span>
        </div>
        <div class="detailDialog_operate" v-if="isShowOperate">
          <p @click="editInspectItem(index)">编辑</p>
          <p @click="deleteInspectItem(index)">删除</p>
        </div>
      </div>

      <!-- 填值类 -->
      <div class="detailDialog_inputContent" v-if="item.optionType === 3" :key="index">
        <div class="detailDialog_inputContent_type">
          <p class="detailDialog_inputContent_type_typeName">填值类</p>
          <div
            class="detailDialog_inputContent_type_typeContent"
          >检查内容&nbsp;&nbsp;{{item.content}}</div>
        </div>
        <div class="detailDialog_inputContent_inputBox">
          <input
            class="detailDialog_inputContent_inputBox_input"
            type="text"
            disabled
            placeholder="请填写数据"/>
          <span class="detailDialog_inputContent_inputBox_inputUnit">&nbsp;&nbsp;({{item.upperLimit}}~{{item.lowerLimit}}{{item.unit}})&nbsp;&nbsp;</span>
        </div>
        <div class="detailDialog_operate" v-if="isShowOperate">
          <p @click="editInspectItem(index)">编辑</p>
          <p @click="deleteInspectItem(index)">删除</p>
        </div>
      </div>

      <!-- 拍照类 -->
      <div class="detailDialog_photograph" v-if="item.optionType === 4" :key="index">
        <div class="detailDialog_photograph_type">
          <p class="detailDialog_photograph_type_typeName">填值类</p>
          <div class="detailDialog_photograph_type_typeContent">检查内容&nbsp;&nbsp;{{item.content}}</div>
        </div>
        <div class="detailDialog_photograph_photoContent">
          <div class="detailDialog_photograph_photoContent_photo">
            <img src="" alt="" />
          </div>
          <span
            class="detailDialog_photograph_photoContent_tips"
          >需至少拍&nbsp;&nbsp;{{item.photographNumber}}&nbsp;&nbsp;张照片</span>
        </div>
        <div class="detailDialog_operate" v-if="isShowOperate">
          <p @click="editInspectItem(index)">编辑</p>
          <p @click="deleteInspectItem(index)">删除</p>
        </div>
      </div>
    </template>
  </div>
</template>

<script>
export default {
  props: {
    contents: {
      // 传入检查内容数组
      type: Array,
      require: true,
    },
    isDetailClick: {
      //是从详情点击传值 还是从新增传值
      type: Boolean,
      require: true
    },
    isShowOperate: {
      // 在详情页不进行操作
      type: Boolean,
      default: true,
    }
  },
  computed: {
    contentsList() {
      if(!this.contents) {
        this.contents = []
        return this.contents
      }
      return this.isDetailClick ? this.formatContents(this.contents) : this.contents
      //  增加显示详情 this.contents 不格式化     
      //  点击详情显示详情 this.formatContents(this.contents) 格式化
    }
  },
  methods: {
    // 编辑
    editInspectItem(index) {
      this.$emit('editInspectItem', index)
    },

    // 删除
    deleteInspectItem(index) {
      this.$emit('deleteInspectItem', index)
    },

    // 输出字母
    printLetters(attrIndex) {
      let letters = [
        'A',
        'B',
        'C',
        'D',
        'E',
        'F',
        'G',
        'H',
        'I',
        'J',
        'K',
        'L',
        'M',
        'N',
        'O',
        'P',
        'Q',
        'R',
        'S',
        'T',
        'U',
        'V',
        'W',
        'X',
        'Y',
        'Z',
      ]
      return letters.find((item, index) => {
        return index === attrIndex
      })
    },

    // 格式化
    formatContents(contents) {
      let contentsList = []
      contents.forEach((item, index) => {
        let attr = []
        
        let upperLimit = item.checkType === 3 ? item.options[0].option : ''

        let lowerLimit = item.checkType === 3 ? item.options[1].option : ''
        
        let unit =  item.checkType === 3 ? item.options[2].option : ''

        let photographNumber =  item.checkType === 4 ? item.options[0].option : ''

        if(item.checkType === 2 || item.checkType === 1) {
          item.options.forEach((item, index) => {
            attr.push({
              option: item.option,
              isOk: item.isOk
            })
          })
        }

        contentsList.push({
          content: item.name,
          optionType: item.checkType,
          attr,
          upperLimit,
          lowerLimit,
          unit,
          photographNumber
        })

      })

      return contentsList
    }

  },
}
</script>

<style lang="scss">
$tipFontColor: #999999;
$bottomBorderColor: #eaeaea;
$photographBgColor: #f2f2f2;

.detailDialog {
  &>div:hover {
    background-color: #e7f2f4;
    transition: all 0.5s;
  }

  &>div:hover .detailDialog_operate {
    opacity: 1;
    transition: all 0.5s;
  }

  .detailDialog_operate {
    opacity: 0;
    transition: all 0.5s;
    position: absolute;
    height: 50px;
    width: 38px;
    top: 50%;
    right: 10px;
    margin-top: -22px;
    p {
      color: #56a4af;
      margin: 4px 0;
      cursor: pointer;
    }
  }

  // 合不合格类
  .detailDialog_qualification {
    padding: 10px 0;
    padding-left: 15px;
    transition: all 0.5s;
    display: flex;
    flex-direction: column;
    position: relative;
    border-bottom: 1px solid $bottomBorderColor;
    .detailDialog_qualification_type {
      display: flex;
      .detailDialog_qualification_type_typeName {
        color: $tipFontColor;
        margin-right: 8px;
      }
      .detailDialog_qualification_type_typeContent {
        flex-grow: 1;
      }
    }
    .detailDialog_qualification_qualified {
      padding: 2px 0;
    }
    .detailDialog_qualification_unqualified {
      padding: 2px 0;
    }
  }

  // 单选类
  .detailDialog_singleSelect {
    transition: all 0.5s;
    display: flex;
    flex-direction: column;
    padding: 10px 0;
    padding-left: 15px;
    position: relative;
    border-bottom: 1px solid $bottomBorderColor;
    .detailDialog_singleSelect_type {
      display: flex;
      .detailDialog_singleSelect_type_typeName {
        color: $tipFontColor;
        margin-right: 8px;
      }
      .detailDialog_singleSelect_type_typeContent {
        flex-grow: 1;
      }
    }
    .detailDialog_singleSelect_list {
      display: flex;
      justify-content: space-between;
      padding: 2px 0;
      width: 300px;
      span:nth-child(1) {
        width: 300px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
      .detailDialog_singleSelect_list_unqualified {
        color: $tipFontColor;
        margin-left: 20px;
        width: 100px;
      }
    }
  }

  // 填值类
  .detailDialog_inputContent {
    transition: all 0.5s;
    display: flex;
    flex-direction: column;
    padding: 10px 0;
    position: relative;
    padding-left: 15px;
    border-bottom: 1px solid $bottomBorderColor;
    .detailDialog_inputContent_type {
      display: flex;
      .detailDialog_inputContent_type_typeName {
        color: $tipFontColor;
        margin-right: 8px;
      }
    }
    .detailDialog_inputContent_inputBox {
      padding: 2px 0;
      .detailDialog_inputContent_inputBox_input {
        height: 30px;
        padding-left: 8px;
      }
      .detailDialog_inputContent_inputBox_inputUnit {
        color: $tipFontColor;
      }
    }
  }

  // 拍照类
  .detailDialog_photograph {
    transition: all 0.5s;
    padding: 4px 0;
    display: flex;
    flex-direction: column;
    position: relative;
    padding-left: 15px;
    border-bottom: 1px solid $bottomBorderColor;
    .detailDialog_photograph_type {
      display: flex;
      .detailDialog_photograph_type_typeName {
        color: $tipFontColor;
        margin-right: 8px;
      }
      .detailDialog_photograph_type_typeContent {
        flex-grow: 1;
      }
    }
    .detailDialog_photograph_photoContent {
      display: flex;
      align-items: center;
      padding: 10px 0;
      .detailDialog_photograph_photoContent_photo {
        width: 80px;
        height: 80px;
        background-color: $photographBgColor;
        img {
          display: block;
          width: 100%;
          height: 100%;
        }
      }
      .detailDialog_photograph_photoContent_tips {
        color: $tipFontColor;
        margin-left: 20px;
      }
    }
  }
}
</style>